<template>
	<view class="main">
		<!-- <NavigationBar origin="main" text="书架"></NavigationBar> -->
		<!-- <view class="searchtabs"  :style="{'marginTop': navHeight + 'rpx'}"> -->
		<view class="searchtabs" >
			<view class="indextop">
				<view class="indexsearch">
					<view class="indexhezi">
						<view class="indexicon">
							<view class="indexiconn">
								<image src="@/static/icon/search.png" mode=""></image>
							</view>
						</view>
						<input type="text" v-model="keyword" id="indexbtn" placeholder="请输入要搜索的内容关键词">

					</view>

				</view>
				<view class="indexsearchbtn" @tap="search">
					搜索
				</view>
			</view>
			<view class="tab">
				<view class="tabs">
					<u-tabs name="cate_name" count="cate_count" :list="list" :is-scroll="false" :current="current"
						:bar-style="barstyle" inactive-color="#999999" active-color="#000000" bg-color="none"
						@change="change">
					</u-tabs>
				</view>
			</view>
		</view>
		<view class="zujian">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll"  :style="{'maxHeight' : `calc(100vh - 100rpx);`}">
				<view class="scroll-view-item">
					<Dramacase v-if="current==0" :DramacaseList="DramacaseList" @dramacasedramacase="dramacasedramacase" type="favorite">
					</Dramacase>
					<Dramacase v-if="current==1" :DramacaseList="History" @dramacasedramacase="historyhistory" type="history">
					</Dramacase>
					<!-- <ReadHistory v-if="current==1" :History="History" @historyhistory="historyhistory"></ReadHistory> -->
				</view>
			</scroll-view>
		</view>
		<MyPopup v-if="show" :content='content' @showshow='showshow'></MyPopup>
	</view>
</template>

<script>
	import NavigationBar from '@/components/navigationBar.vue'
	import
	ReadHistory
	from "@/components/ReadHistory.vue"
	import
	Dramacase
	from "@/components/Dramacase.vue"
	import MyPopup from "@/components/Popup.vue"
	import {
		getFavoriteList,
		getUserWatchRecordList
	} from "@/request/api.js"
	export default {
		data() {
			return {
				current: 0,
				barstyle: {
					background: this.$theme.color.normal,
				},
				list: [{
					cate_name: '我的收藏'
				}, {
					cate_name: '观看历史'
				}],
				keyword: '',
				History: [],
				DramacaseList: [],
				newDramacaseList: [],
				page: 1,
				Bpage: 1,
				page_size: 10,
				BtotalPage: '',
				Cpage: 1,
				CtotalPage: '',
				show: false,
				content: '请输入内容',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			};
		},
		onShow() {
			this.goTop()
			setTimeout(() => {
				this.ReadHistoy()
				this.Dramacase()
			}, 300)
		},
		onHide() {
			this.Cpage = 1
			this.Bpage = 1
			this.show = false
		},
		methods: {
			change(index) {
				this.current = index;
				this.goTop()
			},
			showshow(v) {
				this.show = v
			},
			historyhistory() {
				this.Bpage = 1
				this.ReadHistoy()
			},
			dramacasedramacase() {
				this.Cpage = 1
				this.Dramacase()
			},
			//滑动到顶部
			upper(e) {},
			//滑动到底部
			lower(e) {
				if (this.current == 1) {
					this.moreReadHistoy()
				} else {
					this.moreDramacase()
				}
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			async search() {
				if (this.keyword.trim() == '') {
					this.content = '请输入内容'
					this.show = true
					this.keyword = ''
					return
				}
				let res = await Books.Search(this.keyword, 1)
				if (res.data.page_info.total == 0) {
					this.content = '暂无相关书籍，换个关键词试试'
					this.show = true
					this.keyword = ''
				}
				if (res.data.page_info.total != 0) {
					let kldata = res.data
					console.log(res.data);
					if (res.data.page_info.search_keyword_id != 0) {
						uni.navigateTo({
							url: `/pages/novel_plugin/index?id=${kldata.data[0].id}&search_keyword_id=${kldata.page_info.search_keyword_id}&chapter_id=${kldata.data[0].chapter_id}`
						})
						this.keyword = ''
					} else {
						let keywordList = encodeURIComponent(JSON.stringify(res.data))
						uni.navigateTo({
							url: `/pages/SearchList/SearchList?keyword=${this.keyword}&keywordList=` +
								keywordList
						})
						this.keyword = ''
					}
				}
			},
			// 书架
			async Dramacase() {
				let res = await getFavoriteList(
				{
					page:this.Cpage,
					pagesize:this.page_size,
				})
				this.CtotalPage = res.data.page_info.total
				this.DramacaseList = res.data.data
			},
			// 阅读历史
			async ReadHistoy() {
				let res = await getUserWatchRecordList({
					page:this.Bpage,
					page_size:this.page_size
				})
				this.BtotalPage = res.data.page_info.total
				this.History = res.data.data
			},
			async moreReadHistoy() {
				let newBtotalPage = Math.ceil(this.BtotalPage / this.page_size)
				this.Bpage++
				if (this.Bpage > newBtotalPage) return
				let res = await getUserWatchRecordList({
					page:this.Bpage,
					page_size:this.page_size
				})
				let pageList = res.data.data
				this.History = this.History.concat(pageList)
			},
			async moreDramacase() {
				let newCtotalPage = Math.ceil(this.CtotalPage / this.page_size)
				this.Cpage++
				if (this.Cpage > newCtotalPage) return
				let res = await getFavoriteList(
				{
					page:this.Cpage,
					pagesize:this.page_size,
				})
				let pageList = res.data.data
				this.DramacaseList = this.DramacaseList.concat(pageList)
			}
		},
		components: {
			ReadHistory,
			Dramacase,
			MyPopup,
			NavigationBar
		},
	}
</script>

<style lang="less" scoped>
	@import url("./Favorite.less");
</style>